<!DOCTYPE HTML >
<html>
    <head>
        <title>子代选择器</title>
        <meta charset='utf-8'>
        <style type='text/css'>
           h1>i
            {border:1px blue solid;}
        </style>
        <link rel='stylesheet' type='text/css' href='../css/c1.css'>
    </head>
    <body>
        <div class='title'>子代选择器</div>
        与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
        <div class='title'>代码示例</div>
        <div class='code'>
        <pre>
                 &lt;style type='text/css'&gt;
                    h1>i {
                       border:1px blue solid;
               }
                  &lt;/style&gt;
                &lt;h1&gt;
                    &lt;i&gt;
                       测试代码
                    &lt;/i&gt;
                 &lt;/h1&gt;
                   &lt;h1&gt;
                    &lt;u&gt;
                       测试代码
                    &lt;/u&gt;
                 &lt;/h1&gt;
        </pre>
        </div>
        <div class='title'>代码效果</div>
        <div class='result'>
       <h1>
           <i>测试代码</i>
       </h1>
        <h1>
            <u>测试代码</u>
       </h1>
        </div>
    </body>
</html>